<template>
    <div>
        <!-- <TableSearch :query="query" :options="searchOpt" :search="handleSearch" /> -->
        <div class="container">
            <TableCustom 
            :columns="columns" 
            :tableData="tableData" 
            :total="total" 
            :delFunc="handleDelete" 
            :page-change="changePage" >
            </TableCustom>
        </div>
       
    </div>
</template>

<script setup lang="ts" name="system-user">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { User } from '@/types/user';
import TableCustom from '@/components/table-custom2.vue';
// 导入API
import { listUserApi , removeUserApi} from '../../api/index'

// 分页处理
interface PItem {index:number,size:number,total?:number}
let page = reactive<PItem>({
    index: 1,
    size: 10,
    total: 0,
})
let total = ref(0)

// 表格相关
let columns = ref([
    { type: 'index', label: '序号', width: 55, align: 'center' },
    { prop: 'user_name', label: '用户名' },
    { prop: 'user_phone', label: '手机号' },
    { prop: 'user_email', label: '邮箱' },
    { prop: 'user_create_time', label: '注册时间' },
    { prop: 'operator', label: '操作', width: 250 },
])

// 获取用户列表
const tableData = ref<User[]>([]);
const getData = async (page=1,pageSize=10) => {
    let token = localStorage.getItem('AUTO_TOKEN')
    let num = 0;
    await listUserApi({token,page,pageSize})
    .then(
        (content: any)=>{
            console.log('用户列表：',content)
            let {msg,code,result} = content
            if(code == 200) {
                tableData.value = result;
                num = content.data[0].total as number
            }
            else {
                console.log(msg)
            }
        }
    )
    total.value = num;
};

getData(page.index,page.size);


// 分页
const changePage = (val: number) => {
    page.index = val;
    getData(page.index,page.size);
};


// 删除相关
const handleDelete = async (row: User) => {
    // console.log(row)
    let token = localStorage.getItem("AUTO_TOKEN")

    if(token){
        let {id} = row;
        await removeUserApi({token,user_id: id})
        .then(
            content=>{
                console.log(content);
                let {code, msg} = content;
                if(code==200){
                    ElMessage.success(msg)
                    getData(page.index,page.size);
                }
                else {
                    ElMessage.error(msg)
                }
            }
        )
    }
}

</script>

<style scoped></style>